'use strict'
import React, { Component, PropTypes } from 'react'

import Slider from '../../components/Slider/Slider';
import Notice from './Notice'
import Recommend from './Recommend'
import Banner from './Banner'
import ItemList from './ItemList'

class SwipeTab extends Component {








constructor(props) {
        super(props);
        this.state = {
            imageData : [
                {
                    src: require('../../../image/demo1.jpg'),
                    alt: 'images-1',
                },
                {
                    src: require('../../../image/demo2.jpg'),
                    alt: 'images-2',
                },
                {
                    src: require('../../../image/demo3.jpg'),
                    alt: 'images-3',
                },
            ],
            bannerData:{
                url:"http://wwww.baidu.com",
                image:"../../../image/banner.jpg",
                height:'2.8rem'
            },hotBannerData:{
                url:"http://wwww.baidu.com",
                image:"../../../image/hotBanner.jpg",
                height:'4.4rem'
            },hotGoodList :[
                {
                    id:"1",
                    name: "小米WiFi放大器",
                    desc: '轻松扩展WiFi信号',
                    image: '../../../image/product1.jpg',
                    price:'99.9'

                },
                {
                    id:"2",
                    name: "自动折叠伞",
                    desc: '防泼水伞布，轻盈拒水',
                    image: '../../../image/product1.jpg',
                    price:'88.8'

                },{
                    id:"3",
                    name: "米家感应夜灯",
                    desc: '举步之间，光明立现',
                    image: '../../../image/product1.jpg',
                    price:'30'

                },{
                    id:"4",
                    name: "车载快充扩展配件",
                    desc: '小而美，科技范',
                    image: '../../../image/product1.jpg',
                    price:'99'

                },{
                    id:"5",
                    name: "米家感应夜灯11",
                    desc: '举步之间，光明立现',
                    image: '../../../image/product1.jpg',
                    price:'30'

                },{
                    id:"6",
                    name: "车载快充扩展配件22",
                    desc: '小而美，科技范',
                    image: '../../../image/product1.jpg',
                    price:'99'

                }


            ]
        };
    }


    render() {


        const hotGoodList = this.state.hotGoodList;

        console.log(hotGoodList);

        var itemList = new Array();

        for(var i=0;i<hotGoodList.length;i++){
            if(i%2==0){

                var items = hotGoodList.slice(i,i+2);
                itemList.push(items);
            }

        }


        return (
            <div className="swipe-tab-content slick-slide slick-c slick-current slick-active"  styleName="width: 375px;">
                <Slider
                    items={this.state.imageData}
                    speed={1.2}
                    delay={2.1}
                    pause={true}
                    autoplay={true}
                    dots={true}
                    arrows={false}
                />


                <div className="first">
                    <div className="f-list">


                        <div className="section">
                            <div className="divider_line" style={{width:'100%',height:'0.16rem', 'border-bottom': '0.16rem solid #f5f5f5'}}></div>
                        </div>

                        <Notice name="John" />

                        <div className="section">
                            <div className="divider_line" style={{width:'100%',height:'0.16rem', 'border-bottom': '0.16rem solid #f5f5f5'}}></div>
                        </div>

                        <Recommend name="John" />
                        <div className="section">
                            <div className="divider_line" style={{width:'100%',height:'0.16rem', 'border-bottom': '0.16rem solid #f5f5f5'}}></div>
                        </div>
                        <Banner bannerData={this.state.bannerData} />

                        <div className="section">
                            <div className="divider_line" style={{width:'100%',height:'0.16rem', 'border-bottom': '0.16rem solid #f5f5f5'}}></div>
                        </div>


                        <Banner bannerData={this.state.hotBannerData} />
                        <div className="section">
                            <div className="divider_line" style={{width:'100%',height:'0.04rem', 'border-bottom': '0.04rem solid #ffffff'}}></div>
                        </div>


                        {
                            itemList.map(function (item,index) {

                                return <ItemList itemList={item}/>

                            })
                        }



                    </div>
                </div>



            </div>

        )

    }
}

export default SwipeTab;